<template>
	<view>
		<view class="user-head-main">
			<image class="user-head" :src="user.head"></image>
			<text class="user-head-edit">修改头像</text>
		</view>
		<view class="user-title">基本信息(必填)<text>输入真实姓名能提高录取率哦</text></view>
		<view class="user-item">
			<label class="user-item-label">姓名</label>
			<uni-easyinput class="user-item-input" type="text" v-model="user.userName" placeholder="请输入姓名"
				:inputBorder="false" :placeholderStyle="placeholderStyle" />
		</view>
		<view class="user-item">
			<label class="user-item-label">性别</label>
			<picker class="user-item-input" @change="bindPickerChange" :value="sexIndex" :range="sexList"
				range-key="label">
				<view class="uni-input">{{sexList[sexIndex].label}}</view>
			</picker>
			<text class="user-item-arrow"></text>
		</view>
		<view class="user-item">
			<label class="user-item-label">职位</label>
			<uni-easyinput class="user-item-input" type="text" v-model="user.job" placeholder="请输入职位名称"
				:inputBorder="false" :placeholderStyle="placeholderStyle" />
		</view>
		<view class="user-item">
			<label class="user-item-label">电话</label>
			<uni-easyinput class="user-item-input" type="text" v-model="user.tel" placeholder="请输入手机号码"
				:inputBorder="false" :placeholderStyle="placeholderStyle" maxlength="11" />
		</view>
		<view class="user-title">选填信息</view>
		<view class="user-item" @click="onAddSkillTagClick">
			<label class="user-item-label">技能标签</label>
			<text class="user-item-text">请添加</text>
			<text class="user-item-arrow"></text>
		</view>
		<view class="user-title">个人简介（200字内）</view>
		<uni-easyinput type="textarea" autoHeight v-model="user.content" :inputBorder="false"
			:placeholderStyle="placeholderStyle" placeholder="请输入个人介绍">
		</uni-easyinput>
		<view class="user-title">添加图片(最多添加4张，第一张默认为封面)</view>
		<view  class="user-item-image">
		<uni-file-picker v-model="user.imglist" limit="4" @select="onImagesSelect">
		</uni-file-picker>
		</view>
		<view class="user-footer">
		<button type="default" class="submit-btn" @click="onSubmitClick">保存</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				placeholderStyle: "font-size:30rpx;color:#acacac;text-align: right;",
				sexIndex: 0,
				sexList: [{
					id: 1,
					label: "男"
				}, {
					id: 2,
					label: "女"
				}],
				user:{
					userName:"",
					sex:"",
					job:"",
					tel:"",
					content:"",
					imglist:[]
				}
			}
		},
		onLoad() {
			this.getUser()
		},
		methods: {
			getUser(){
				//调接口
			},
			onImagesSelect: function(e) {
				console.log(e)
				//调图片上传接口
				uni.uploadFile({})
			},
			onAddSkillTagClick(){
				uni.navigateTo({
					url:"./addSkillTag"
				})
			},
			onSubmitClick(){
				console.log("保存");
				//调保存接口啦
			}
		}
	}
</script>

<style>
	.user-head-main {
		margin: 28rpx auto;
		display: flex;
		flex-flow: column;
		align-items: center;
	}

	.user-head {

		width: 108rpx;
		height: 108rpx;
		border-radius: 50%;
		display: block;
		background-color: #007AFF;
		margin-bottom: 20rpx;
	}

	.user-head-edit {
		color: #1371FF;
		font-size: 20rpx;
		display: block;
	}

	.user-title {
		padding: 0 32rpx;
		height: 52rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 20rpx;
		color: #7B7B7B;
		background-color: #F4F4F4;
	}

	.user-item {
		height: 86rpx;
		border-bottom: 1rpx solid #E5E5E5;
		padding: 0 32rpx;
		display: flex;
		align-items: center;
	}

	.user-item-label {
		font-size: 30rpx;
		color: #181818;
	}
.user-item-input{
	flex: 1;
}
	.user-item-input input {
		text-align: right;
		font-size: 30rpx;
		color: #181818;
	}
.user-item-input .uni-input{
	text-align: right;
}
	.user-item-arrow {
		width: 32rpx;
		height: 32rpx;
		background: url(../../static/images/icon_jinru@3x.png) center no-repeat;
		background-size: 32rpx;
	}

	.user-item-text {
		font-size: 30rpx;
		color: #acacac;
		text-align: right;
		flex: 1;
	}

	.uni-easyinput__content-textarea {
		border-radius: 4rpx;
		padding:28rpx 32rpx !important;
	}
	.user-item-image{
		padding:28rpx 32rpx !important;
	}
	.user-footer{
		height: 186rpx;
		padding: 0 32rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #F4F4F4;
	}
</style>
